<template>
	<MobileTimePop v-model="isShowPop" @update:close="handlerClose" />
	<div class="detail-container">
		<el-collapse accordion class="detail-container-collapse">
			<el-collapse-item :name="value" class="detail-container-collapse-item" v-for="value in 10" :key="value">
				<!-- 标题 -->
				<template #title="{ isActive }">
					<div class="detail-container-collapse-item-title">
						<img src="~/assets/svgs/zhi_ding.svg" alt="置顶" />
						<div :class="['title-wrapper', { 'is-active': isActive }, { 'is-blod': isActive }]">我忘记了密码，无法登录。 我该怎么办？</div>
					</div>
				</template>
				<!-- 展开图标 -->
				<template #icon="{ isActive }">
					<el-icon :size="25">
						<ArrowUp v-if="isActive" />
						<ArrowDown v-else />
					</el-icon>
				</template>
				<!-- 正文 -->
				<div class="detail-container-collapse-item-content">
					Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users
					are used to; Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that
					the users are used to; Consistent with real life: in line with the process and logic of real life, and comply with languages and
					habits that the users are used to;
				</div>
				<!-- 时间 -->
				<div class="detail-container-collapse-item-content-time" @click="hanlderTimeClick($event)">
					<div class="detail-container-collapse-item-content-time-text">
						<span class="gray">更新时间：</span> <span class="black" style="margin-right: 4px">2023-11-11 11:11:11</span>
					</div>
					<el-icon>
						<ArrowRight />
					</el-icon>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script setup>
	import { ArrowUp, ArrowDown, ArrowRight } from '@element-plus/icons-vue';
	const isShowPop = ref(false);
	function hanlderTimeClick(e) {
		const target = e.target.parentElement;
		if (target.classList.contains('detail-container-collapse-item-content-time-text')) {
			isShowPop.value = true;
		}
	}
	function handlerClose() {
		console.log(22);
		isShowPop.value = false;
	}
</script>
<style lang="scss" scoped>
	.detail-container {
		width: 100%;
		background-color: white;
		padding: 20px;
		border-radius: var(--issue-mobile-category-bg-radius);
		.detail-container-collapse {
			border-top: none;
		}
		.detail-container-collapse-item-title {
			@include flex(_, flex-start);
			@include font(_, 28px, 36px, 400, _);
			// @include mobileVwCalc(28px,"font-size");
			height: 96px;
			img {
				width: 40px;
				// @include mobileVwCalc(40px,"width");
				height: 40px;
				margin-right: 20px;
			}
		}
		.detail-container-collapse-item-content {
			@include font(_, 24px, 36px, 400, _);
			margin-bottom: 24px;
		}
		.detail-container-collapse-item-content-time {
			@include font(_, 24px, 36px, 400, _);
			@include flex(_, flex-start);
		}
	}
	.gray {
		color: var(--issue-text-mobile-category-gray-color);
	}
	.black {
		color: var(--issue-text-mobile-category-color);
	}
	.is-blod {
		font-weight: bold;
	}
</style>
